<!--
 * @Descripttion:
 * @Author: zhangziyu
 * @Date: 2022-11-05 18:00:56
 * @LastEditors: cuiyingchun
 * @LastEditTime: 2022-11-06 00:47:47
 * @Introduce: 专家风采 list
-->
<template>
  <div class="content">
    <el-breadcrumb separator="/" class="mb20">
      <el-breadcrumb-item :to="{ path: '/' }"><span class="gray"><i class="el-icon-s-home"></i>首页</span></el-breadcrumb-item>
      <el-breadcrumb-item><span class="green">专家风采</span></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="expertList">
      <div class="expertItem" v-for="(item,index) in dataJson" :key="index">
        <div class="eImgbox" :style="{'backgroundImage':'url('+bg+')'}"><img :src="item.img" alt="" srcset="" class='eImg'/></div>
        <div class="eBox">
          <el-row>
            <el-col :span="8" class="namefl">{{item.name}}</el-col>
            <el-col :span="16" class="namefr">{{item.tag}}</el-col>
          </el-row>
          <p class="intro">
            {{item.intro}}
          </p>
          <el-button @click="gotoview(item.name)">了解详情</el-button>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        class="paging"
        :current-page="page"
        :total="200"
        layout="total,prev, pager, next,jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { dataJson } from './data'
export default {
  data () {
    return {
      page: 1,
      total: 100,
      bg: require('../../assets/img/rect.png'),
      dataJson: dataJson
    }
  },
  mounted () {
    window.scrollTo(0, 0)
  },
  methods: {
    gotoview (name) {
      this.$router.push({
        name: 'expertview',
        query: {
          name
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  .mb20{margin-bottom: 20px;}
  .gray{color: #C2C6CC;}
  .green{
    color:#2b970d;
  }
}
.expertList{
  overflow: hidden;
  .expertItem{
    float: left;
    width: 285px;
    margin: 0 14px 10px 0;
    &:nth-child(4n){
      margin-right:0;
    }
    .eImgbox{
      background-repeat:  no-repeat;
      background-position: bottom;
      background-size:contain;
    }
    .eImg{
      width: 100%;
      height: 300px;
      display: block;
    }
    .eBox{
      padding: 15px 20px;
      box-sizing: border-box;
      border: 1px solid #eee;
      .namefl{
        font-size: 16px;
        font-weight: bold;
      }
      .namefr{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: #999999;
        font-size: 12px;
        line-height: 18px;
      }
      .intro{
        line-height: 1.5;
        display:-webkit-box;
        overflow:hidden;
        text-overflow:ellipsis;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
      }
      /deep/ .el-button:focus,/deep/ .el-button:hover{
        color: #2b970d;
        border-color: #77df5a;
        background-color: #ebfce6;
      }
    }
  }
}
.pagination{
      width: 100%;
      text-align: center;
      margin: 20px 0;

      .paging /deep/ .el-pager li{
        background-color: inherit;
        border: 1px solid #ddd;
        margin: 0 4px;
        color: #333333;
      }
      /deep/ .el-pagination .btn-next,/deep/ .el-pagination .btn-prev{
        border: 1px solid #ddd;
        margin: 0 4px;
      }
      .paging /deep/ .el-pager li.active{
        border-color: #2b970d;
        color: #2b970d;
      }
    }
</style>
